<template>
  <div class="flex items-center justify-between py-[10px]">
    <div>
      <template v-for="item in leftActions" :key="item.label">
        <el-button
          v-if="checkShow(item)"
          :type="item.type"
          @click="item.fn"
          v-bind="item.itemProps"
          v-hasPermi="item?.permission"
        >
          <i v-if="item.icon" class="iconfont mr-[2px]" :class="item.icon"></i>
          {{ item.label }}
        </el-button>
      </template>
      <slot name="left"></slot>
    </div>

    <div>
      <template v-for="item in rightActions" :key="item.label">
        <el-button
          v-if="checkShow(item)"
          :type="item.type"
          @click="item.fn"
          v-bind="item.itemProps"
          v-hasPermi="item?.permission"
        >
          <i v-if="item.icon" class="iconfont mr-[2px]" :class="item.icon"></i>
          {{ item.label }}
        </el-button>
      </template>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  actions: { type: Array, default: () => [] },
});
const { actions = [] } = toRefs(props);
const leftActions = computed(() => {
  return actions.value?.filter((n) => !n.right || n.left);
});

const rightActions = computed(() => {
  return actions.value?.filter((n) => !!n.right);
});

const checkShow = (item) => {
  const { show } = item;
  return show ? show?.(item) : true;
};
</script>
<style lang="scss" scoped>
:deep(.el-button) {
  height: 28px;
}
:deep(.el-button+.el-button){
  margin-left: 8px;
}
</style>
